<template>
  <div>
    <el-form
      ref="diagnosisFrom"
      :model="diagnosis"
      label-width="100px"
      :rules="diagnosisRules"
    >
      <!-- <el-row v-if="diagnosis.remark">
                      <el-tag type="danger"
                              size="mini" >{{ diagnosis.remark }}</el-tag>
                  </el-row> -->
      <el-row class="line-text-title" type="flex" justify="middle">
        <span class="title-medium text-important">诊断信息</span>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="病理编号" prop="pathologyId">
            <el-input
              v-model="diagnosis.pathologyId"
              :disabled="isMatched"
              placeholder="请输入病理编号"
              class="input-form"
              size="mini"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="切片标签">
            <el-input
              v-model="diagnosis.sliceLabel"
              placeholder="请输入切片标签"
              class="input-form"
              size="mini"
              :disabled="isMatched"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="冰冻">
            <el-select
              v-model="diagnosis.freezeType"
              placeholder="请选择冰冻"
              class="picker-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="(data, index) in freezeTypeList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="取材脏器" prop="sampleOrganId">
            <el-select
              v-model="diagnosis.sampleOrganId"
              :disabled="isDuringDiagnosisOpinion"
              placeholder="请选择取材脏器"
              class="picker-form"
              size="mini"
            >
              <el-option
                v-for="(data, index) in organList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标本类别" prop="specimenType">
            <el-select
              v-model="diagnosis.specimenType"
              placeholder="请选择标本类别"
              class="picker-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="(data, index) in specimenCategoryList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查类型" prop="checkCategory">
            <el-select
              v-model="diagnosis.checkCategory"
              :disabled="isDuringDiagnosisOpinion"
              placeholder="请选择检查类型"
              size="mini"
              class="picker-form"
            >
              <el-option
                v-for="data in checkCategoryList"
                :key="data.id"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="诊断组">
            <el-select
              v-model="diagnosis.subspecialtyType"
              placeholder="请选择诊断组"
              class="picker-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="(data, index) in subspecialtyTypeList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="患者ID">
            <el-input
              v-model="diagnosis.patientId"
              placeholder="请输入患者ID"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="取材部位">
            <el-input
              v-model="diagnosis.sampleBody"
              placeholder="请输入取材部位"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="切片类别">
            <el-select
              v-model="diagnosis.sliceCategory"
              placeholder="请选择切片类别"
              class="picker-form"
              size="mini"
              :disabled="isMatched"
            >
              <el-option
                v-for="(data, index) in sliceCategoryList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="切片用途">
            <el-select
              v-model="diagnosis.slicePurpose"
              placeholder="请选择切片用途"
              class="picker-form"
              size="mini"
              :disabled="isMatched"
            >
              <el-option
                v-for="(data, index) in sliceUseList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="21">
          <el-form-item label="总切片标签">
            <el-input
              v-model="diagnosis.allSliceLabel"
              placeholder="总切片标签"
              type="textarea"
              size="mini"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21" style="margin-top: 20px">
          <el-form-item label="总切片类别">
            <el-input
              v-model="diagnosis.allsliceCategoryName"
              placeholder="总切片类别"
              type="textarea"
              size="mini"
              :disabled="true"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="line-text-title el-row" type="flex" justify="middle">
        <span class="title-medium text-important">病人信息</span>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="病人HIS码">
            <el-input
              v-model="diagnosis.hisnumber"
              placeholder="请输入病人HIS码"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="病人类别">
            <el-select
              v-model="diagnosis.patientCategory"
              placeholder="请选择病人类别"
              size="mini"
              class="picker-form"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="data in patientCategoryList"
                :key="data.id"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻">
            <el-select
              v-model="diagnosis.marryType"
              placeholder="请选择婚姻状态"
              size="mini"
              class="picker-form"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="(data, index) in marryTypeList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="患者姓名">
            <el-input
              v-model="diagnosis.name"
              placeholder="请输入患者姓名"
              class="input-form"
              size="mini"
              maxLength="50"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-select
              v-model="diagnosis.sex"
              placeholder="请选择性别"
              size="mini"
              class="picker-form"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="(data, index) in SexKindList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄">
            <el-input
              v-model="diagnosis.age"
              placeholder="请输入患者年龄"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
              <el-select
                v-model="diagnosis.ageUnit"
                placeholder=""
                slot="append"
                size="mini"
              >
                <el-option
                  v-for="(data, index) in ageUnitKindList"
                  :key="index"
                  :label="data.name"
                  :value="data.id"
                >
                </el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="民族">
            <el-select
              v-model="diagnosis.nationalType"
              placeholder="请选择民族"
              size="mini"
              class="picker-form"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="(data, index) in nationalTypeList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业">
            <el-input
              v-model="diagnosis.occupation"
              placeholder="请输入职业"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="cardId">
            <el-input
              v-model="diagnosis.cardId"
              placeholder="请输入身份证号"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="病人地址">
            <el-input
              v-model="diagnosis.patientAddress"
              placeholder="请输入病人地址"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门诊号">
            <el-input
              v-model="diagnosis.patientNo"
              placeholder="请输入门诊号"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门诊科室">
            <el-input
              v-model="diagnosis.outpatientDepartment"
              placeholder="请输入门诊科室"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="住院号">
            <el-input
              v-model="diagnosis.hospitalizedNo"
              placeholder="请输入住院号"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="病区名称">
            <el-input
              v-model="diagnosis.wardName"
              placeholder="请输入病区名称"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="床位号">
            <el-input
              v-model="diagnosis.bedId"
              placeholder="请输入床位号"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="病人电话">
            <el-input
              v-model="diagnosis.patientPhone"
              placeholder="请输入病人电话"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="line-text-title el-row" type="flex" justify="middle">
        <span class="title-medium text-important">申请信息</span>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="申请单号">
            <el-input
              v-model="diagnosis.applicationNo"
              placeholder="请输入申请单号"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="病例库">
            <el-input
              v-model="diagnosis.caseLibrary"
              placeholder="请输入病例库"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="病人费别">
            <el-input
              v-model="diagnosis.expenseCategory"
              placeholder="请输入病人费别"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="收费情况">
            <el-input
              v-model="diagnosis.chargingSituation"
              placeholder="请输入收费情况"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="送检科室">
            <el-input
              v-model="diagnosis.sendDepartment"
              placeholder="请输入送检科室"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="送检医生">
            <el-input
              v-model="diagnosis.sendDoctor"
              placeholder="请输入送检医生"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="送检医生电话">
            <el-input
              v-model="diagnosis.sendDoctorTel"
              placeholder="请输入送检医生电话"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标本名称">
            <el-input
              v-model="diagnosis.specimenName"
              placeholder="请输入标本名称"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标本登记时间">
            <el-date-picker
              v-model="diagnosis.specimenRegisterTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择标本登记时间"
              class="picker-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="手术时间">
            <el-date-picker
              v-model="diagnosis.operationTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择手术时间"
              class="picker-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手术名称">
            <el-input
              v-model="diagnosis.operationName"
              placeholder="请输入手术名称"
              class="input-form"
              size="mini"
              :disabled="isLibraryDetail"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否绝经">
            <el-select
              v-model="diagnosis.isMenopauseType"
              placeholder="请选择是否绝经"
              size="mini"
              class="picker-form"
              :disabled="isLibraryDetail"
            >
              <el-option
                v-for="(data, index) in isMenopauseTypeList"
                :key="index"
                :label="data.name"
                :value="data.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="8">
          <el-form-item label="末次月经时间">
            <el-date-picker
              v-model="diagnosis.menopauseTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择末次月经时间"
              class="picker-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="冰冻时间">
            <el-date-picker
              v-model="diagnosis.freezingDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择冰冻时间"
              class="picker-form"
              size="mini"
              :disabled="isLibraryDetail"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row
                class="line-text-title"
                type="flex"
                justify="middle"
                align="middle"
                v-if="canChangeDiagnosisSetting"
            >
                <span class="title-medium text-important">诊断流程设置</span>

                <el-switch v-model="isAdvanced" class="switch-item"></el-switch>
            </el-row>
            <el-row v-if="isAdvanced">
                <el-col :span="8">
                    <el-form-item label="必须初诊">
                        <el-radio-group
                            v-model="diagnosis.needFirstVisit"
                            size="mini" 
                            class="radio-group"
                        >
                            <el-radio
                                v-for="t in simpleRadioList"
                                :label="t.value"
                                :key="t.value"
                                size="mini" 
                                >{{ t.name }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="越级提交">
                        <el-radio-group
                            v-model="diagnosis.needSkipSubmit"
                            size="mini" 
                            class="radio-group"
                        >
                            <el-radio
                                v-for="t in simpleRadioList"
                                :label="t.value"
                                :key="t.value"
                                size="mini" 
                                >{{ t.name }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="必须终审">
                        <el-radio-group
                            v-model="diagnosis.canFinalVerify"
                            size="mini" 
                            class="radio-group"
                        >
                            <el-radio
                                v-for="t in simpleRadioList"
                                :label="t.value"
                                :key="t.value"
                                size="mini" 
                                >{{ t.name }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row> -->
    </el-form>
  </div>
</template>

<script>
import _ from 'lodash';
import diagnosisDefault from '@templates/diagnosisDefault';
import { vxRule } from '@/client/libs/validator';

export default {
  name: 'DiagnosisMatchDetailBase',
  props: {
    // 是否展开高级诊断设置
    isAdvancedSetting: {
      type: Boolean,
      default: false,
    },
    diagnosis: {
      type: Object,
      default: diagnosisDefault,
    },
  },
  data() {
    return {
      diagnosisRules: {
        pathologyId: [vxRule(true, null, 'blur', '请输入病理编号')],
        checkCategory: [vxRule(true, null, 'blur', '请选择检查类型')],
        specimenType: [vxRule(true, null, 'blur', '请选择标本类别')],
        sampleOrganId: [vxRule(true, null, 'blur', '请选择取材脏器')],
        cardId: [vxRule(false, null, 'blur', '请输入正确的身份证号')],
      },
      dictRequestMap: [
        {
          code: 'patientCategory',
          arrayKey: 'patientCategoryList',
        },
        {
          code: 'SexKind',
          arrayKey: 'SexKindList',
        },
        {
          code: 'ageUnitKind',
          arrayKey: 'ageUnitKindList',
        },
        {
          code: 'specimenCategory',
          arrayKey: 'specimenCategoryList',
        },
        {
          code: 'freezeType',
          arrayKey: 'freezeTypeList',
        },
        {
          code: 'PC-menopause',
          arrayKey: 'isMenopauseTypeList',
        },
        {
          code: 'MarryKind',
          arrayKey: 'marryTypeList',
        },
        {
          code: 'PC-Nation',
          arrayKey: 'nationalTypeList',
        },
        {
          code: 'sliceCategory',
          arrayKey: 'sliceCategoryList',
        },
        {
          code: 'sliceUses',
          arrayKey: 'sliceUseList',
        },
      ],
      sliceUseList: [], //切片用途
      organList: [],
      checkCategoryList: [],
      patientCategoryList: [],
      SexKindList: [],
      ageUnitKindList: [],
      specimenCategoryList: [],
      sliceCategoryList: [],

      isMenopauseTypeList: [],
      freezeTypeList: [],
      marryTypeList: [],
      nationalTypeList: [],
      subspecialtyTypeList: [],

      isAdvanced: this.isAdvancedSetting,
      simpleRadioList: [
        {
          value: 0,
          name: '否',
        },
        {
          value: 1,
          name: '是',
        },
      ],
      flag: 0,
      isLibraryDetail: !!this.$route.query.biopsyResearchLibrariesId,
    };
  },
  async mounted() {
    //检查类型获取
    this.getCheckCategoryList();
    let _this = this;
    console.log('this.diagnosis', this.diagnosis);
    await this.dictionariesRequest(this.dictionaryMap);
    await this.organsRequest();
    await this.formatAge();
    await this.getSubGroupsDataList();
    await setTimeout(() => {
      if (_this.specimenCategoryList.length === 1) {
        _this.diagnosis.specimenType = _this.specimenCategoryList[0].id;
      }
    }, 100);
  },
  computed: {
    canChangeDiagnosisSetting() {
      return (
        this.diagnosis.ifShowSetting === true &&
        this.diagnosis.currentLevel <= 1
      );
    },
    // isWaitingAssign() {
    //   return this.diagnosis.currentLevel === 1;
    // },
    isDuringDiagnosisOpinion() {
      return this.diagnosis.currentLevel > 1;
    },
    isMatched() {
      return !!this.diagnosis.currentLevel;
    },
    // canChangeCanFinalVerify() {
    //   return this.diagnosis.currentLevel < 5 && this.isMatched;
    // },
  },
  methods: {
    formatAge() {
      console.log('type', typeof this.diagnosis.age);
      if (this.diagnosis.age === 0) {
        this.diagnosis.age = '';
      }
    },
    async getCheckCategoryList() {
      const res = await this.$axios({
        method: 'GET',
        url: '/PROXY-Remote/dicts/by-code',
        params: {
          code: 'checkCategory',
        },
      });
      if (res && res.data.code === 200) {
        const result = res.data.data;
        this.checkCategoryList = result;
      }
    },
    dictionariesRequest() {
      this.dictRequestMap.forEach((map) => {
        this.$axios({
          method: 'GET',
          url: '/PROXY-Remote/dicts/list',
          params: {
            code: map.code,
            page: 0,
            size: 99,
          },
        }).then((res) => {
          if (res && res.data.code === 200) {
            this[map.arrayKey] = _.clone(res.data.data);
          }
        });
      });
    },
    organsRequest() {
      this.$axios({
        // 详见 axios 请求配置项
        method: 'GET',
        url: '/PROXY-Remote/organs',
        params: {
          size: 10000,
        },
      }).then((res) => {
        if (res && res.data.code === 200) {
          res.data.data.forEach((t) => {
            this.organList.push({
              id: t.id,
              name: t.name,
            });
          });
        }
      });
    },
    validateForm() {
      this.$refs.diagnosisFrom.validate((valid) => {
        console.log('valid', valid);
        if (valid) {
          console.log('valid', valid);
        } else {
          this.flag += 1;
        }
        return valid;
      });
      return this.$refs.diagnosisFrom.validate();
    },
    // 诊断组 列表获取
    async getSubGroupsDataList() {
      this.$axios({
        // 详见 axios 请求配置项
        method: 'GET',
        url: '/subgroups/searchSubgroupIdAndName',
      }).then(async (res) => {
        if ((await res) && (await res.data.code) === 200) {
          this.subspecialtyTypeList = res.data.data;
        }
      });
    },
  },
};
</script>

<style scoped>
.switch-item {
  margin-left: 10px;
}
.el-row {
  margin-bottom: 12px;
}
.el-row /deep/ .el-form-item__error {
  padding-top: 0;
}

/* 更改input被禁止时的颜色 */

::v-deep .el-input.is-disabled .el-input__inner {
  color: #2c3e50;
}
</style>
